/*
* {
    font-size:48px;
    color:red;
}
*/

body {
    font-size: 48px;
    color:red;
}

ul {
    list-style-type:none;
    color:black;
}

/*
 * 只要div span标签都会生效
 * 所有标签应用以下样式
 */
/*
 * div, span {
 *     background-color:#999999;
 * }
 */

/*
 * 只要属于div标签下的后代元素span就会生效
 * 只会最后一个标签应用样式
 */
/*
 * div span {
 *     background-color:#999;
 * }
 */

/* 子元素选择器, 最后一个标签应用样式 */
/* 层叠关系为一级关系 */
/* div > span { */
/*
 * div > p > span {
 *     background-color:#999;
 * }
 */

/* 相邻元素选择器 */
/*
 * div > ul + p {
 *     background-color:#eee;
 * }
 */

/* 同级元素选择器, CSS3 */
/*
 * div > ul ~ p {
 *     background-color:#eee;
 * }
 */

p[class] {
    background-color:#eee;
}

input:focus {
    background-color:yellow;
}

#left {
    margin-top: 32px;
    margin-left: 32px;
    padding-top: 20px;
    padding-left: 20px;
    border:2px #000 solid;
    width:400px;
}

#mid {
    margin-top: -100px;
    margin-left: -100px;
    background-color:blue;
    width:200px;
    height:200px;
    position: absolute;
    top:50%;
    left:50%;
    /* bottom: 0; */
    /* right: 0; */
}

#form {
    display:none;
}


#username {
    background-color:yellow;
}

.list {
    background-color:#CCCCCC;
}


